<template>
    <div>
        <!--这里是订单-->
        <div class="dingdanstyle">
            <button :class="{activdingdanstyle:1==dingdanstyle_l}" @click="dingdanstyle(1)">线上支付</button>
            <button :class="{activdingdanstyle:2==dingdanstyle_l}" @click="dingdanstyle(2)">线下支付</button>
        </div>
        <div v-if="2==dingdanstyle_l">
            <div class="nav-bar">
                <div class="same-box dingdan " :class="{red: xianxiaordertype==-1 }" @click="xianxia(-1)">
                    全部
                    <i class="icon "></i>
                </div>
                <div class="same-box dingdan" :class="{red: xianxiaordertype==0 }" @click="xianxia(0)">
                    待付款
                    <i class="icon"></i>
                </div>
                <div class="same-box dingdan" :class="{red: xianxiaordertype==1 }" @click="xianxia(1)">
                    已付款
                    <i class="icon"></i>
                </div>
            </div>
            <div class="data_list" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="3">
                <div class="tab-content">
                    <div class="tab-content-in">
                        <ul class="list-ul fot_le">
                            <li class="list-li" v-for="(item,i) in orderlist1" :key="i">
                                <div class="left-img">
                                    <img :src="item.company.headimgurl" alt="">
                                </div>
                                <div class="center-info">
                                    <h3 class="title">{{item.company.companyName}}</h3>
                                    <p class="num" v-show="false">数量：1</p>
                                    <p class="price">总价：{{(item.order.price -item.order.score) | amountMin100}}</p>
                                    <p class="date">下单时间：{{item.order.ctime | formatDate('YYYY-MM-DD hh:mm:ss')}}</p>
                                    <p  id="newp" v-if="item.order.remark!=''">付款留言:{{item.order.remark}}</p>
                                    <p v-else>付款留言:该用户暂无留言</p>
                                </div>
                                <div class="r-btn" v-show="false">提醒付款</div>
                            </li>
                        </ul>
                    </div>
                </div>
                <loadingtmp :busy="busy" :datalength="orderlist1.length" :loadall="loadall"></loadingtmp>
            </div>
        </div>
        <div v-else>
            <div class="nav-bar">
                <div class="same-box dingdan " :class="{red: ordertype==-1 }" @click="bus_order(-1)">
                    全部
                    <i class="icon "></i>
                </div>
                <div class="same-box dingdan" :class="{red: ordertype==0 }" @click="bus_order(0)">
                    待付款
                    <i class="icon"></i>
                </div>
                <div class="same-box dingdan" :class="{red: ordertype==1 }" @click="bus_order(1)">
                    已付款
                    <i class="icon"></i>
                </div>
                <div class="same-box dingdan" :class="{red: ordertype==2 }" @click="bus_order(2)">
                    评价
                    <i class="icon"></i>
                </div>
                <div class="same-box dingdan" :class="{red: ordertype==3 }" @click="bus_order(3)" v-show="false">
                    售后
                    <i class="icon"></i>
                </div>
            </div>
            <div class="data_list" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="3">
                <ul class="ul_li" v-if="ordertype!=2">
                    <li v-for="itemord in orderlist" :key="itemord.id" style="margin-bottom: 25px">
                        <div class="ul_li_head" v-for="itemcompan in itemord.companyList" :key="itemcompan.companyId">
                            <div class="xzicon" v-show="false"></div>
                            <img src="../../../assets/personal/images/shop-icon1.png" @click="href_shops(itemcompan.companyId)"><h1>
                                <p @click="href_shops(itemcompan.companyId)" style=" width: 201px; height: 19px;overflow: hidden;text-align: left;white-space: nowrap;text-overflow: ellipsis;">{{itemcompan.companyName}}</p>
                                <span v-if="0==itemord.payStatus||11==itemord.payStatus">待付款</span>
                                <span v-else-if="0==itemcompan.orderStatus">卖家未发货</span>
                                <span v-else-if="1==itemcompan.orderStatus">卖家已发货</span>
                                <span v-else-if="2===itemord.orderStatus&&1==itemord.payStatus">交易成功</span>
                                <span v-else-if="3==itemord.orderStatus">退款中</span>
                                <span v-else-if="5==itemord.orderStatus">退款成功</span>
                            </h1>
                            <div class="clearfix"></div>
                            <div class="ul_li_data" v-for="itemgoods in itemcompan.goodsList" :key="itemgoods.id">
                                <div class="ul_li_data_left" @click="orderdetailsHref(itemord.orderId)">
                                    <img :src="itemgoods.goodsThum">
                                </div>
                                <div class="ul_li_data_right">
                                    <p style="width:208px;">{{itemgoods.goodsName}}</p>
                                    <h1 style="color:black;">X{{itemgoods.goodsNumber}}</h1><h1>￥{{itemgoods.goodsScreenPrice | amountMin100(2)}}</h1>
                                </div>
                                <div id="pingjia" v-if="2===itemord.orderStatus&&1==itemord.payStatus" >
                                    <button v-if="itemgoods.evaluate==0" style="color:red;" @click="commentsHref(itemgoods.goodsId,itemgoods.goodsThum,itemgoods.goodsName,itemgoods.goodsNumber,itemgoods.goodsScreenPrice,itemcompan.companyId)">立即评价</button>
                                    <button v-else style="color:red;" @click="hrefgoods(itemgoods.goodsId)">查看评论</button>
                                </div>
                            <div class="Subten" style="height:114px" v-if="2==itemcompan.orderStatus&&0==itemord.orderStatus">
                                <button style="margin-top:22px" v-if="itemgoods.evaluate==1" @click="hrefgoods(itemgoods.goodsId)">查看评论</button>
                                <button v-else style="margin-top:22px" @click="commentsHref(itemgoods.goodsId,itemgoods.goodsThum,itemgoods.goodsName,itemgoods.goodsNumber,itemgoods.goodsScreenPrice,item.companyId)">发布评论</button>
                            </div>
                                <div class="clearfix"></div>
                            
                            <div class="Subten" style="height:46px margin-top: -8px;padding:0;margin-bottom: -8px;" v-if="1==itemcompan.orderStatus&&0==itemord.orderStatus">
                                <button @click="confirm(itemcompan.id,itemgoods.goodsId,itemgoods.goodsThum,itemgoods.goodsName,itemgoods.goodsNumber,itemgoods.goodsScreenPrice,itemgoods.prodId,itemcompan.companyId)" style="margin-top:15px;">确认收货</button>
                            </div>
                           </div>
                        </div>
                        <div class="money">
                            <h1>共{{itemord.goodsNumber}}件商品合计：<h1>￥{{itemord.orderAmount | amountMin100(2)}}</h1></h1>
                        </div>
                        <div class="clearfix"></div>
                        <div class="Subten" v-if="0==itemord.payStatus||11==itemord.payStatus">
                            <div style="text-align: left; margin-bottom: 15px" v-if="11==itemord.payStatus">
                                订单未完全支付请立即支付
                            </div>
                            <div style="text-align: left; margin-bottom: 15px;color:#ff7200;" v-else>
                               <img src="../../../assets/personal/images/time.gif" style="width: 20px;vertical-align: middle">  您还有{{itemord.mtime}}分钟, 不支付将会取消订单, 请您立即支付
                            </div>
                            <button @click="fukuanher_payht(itemord.orderId,itemord.amountMoney)" v-if="11==itemord.payStatus">继续支付</button>
                            <button @click="fukuanher(itemord.orderId,itemord.orderAmount)" v-else>立即付款</button>
                            <button @click="cancel(itemord.orderId)" v-if="11!=itemord.payStatus">取消订单</button>
                        </div>
                    </li>
                </ul>
                <ul class="ul_li" v-else>
                    <li>
                        <div class="ul_li_head" style="padding-bottom:0px;" v-for="item in orderlist" :key="item.id">
                            <div class="xzicon" v-show="false"></div>
                            <img src="../../../assets/personal/images/shop-icon1.png" @click="href_shops(item.companyId)">
                            <h1>
                                <p @click="href_shops(item.companyId)" style=" width: 201px; height: 19px;overflow: hidden;text-align: left;white-space: nowrap;text-overflow: ellipsis;">
                                    {{item.companyName}}
                                </p>
                            </h1>
                            <div class="clearfix"></div>
                            <div class="ul_li_data" v-for="itemgoods in item.goodsList" :key="itemgoods.id">
                                <div class="ul_li_data_left" @click="orderdetailsHref(item.orderId)">
                                    <img :src="itemgoods.goodsThum">
                                </div>
                                <div class="ul_li_data_right" @click="orderdetailsHref(item.orderId)">
                                    <p>{{itemgoods.goodsName}}</p>
                                    <h1 style="color:black;">X{{itemgoods.goodsNumber}}</h1>
                                    <h1>￥{{itemgoods.goodsScreenPrice | amountMin100(2)}}</h1>
                                </div>
                                <div id="pingjia">
                                    <button v-if="0==itemgoods.evaluate" style="color:red;" @click="commentsHref(itemgoods.goodsId,itemgoods.goodsThum,itemgoods.goodsName,itemgoods.goodsNumber,itemgoods.goodsScreenPrice,itemgoods.prodId,item.companyId)">立即评价</button>
                                    <button v-else-if="1==itemgoods.evaluate" style="color:red;">已评价</button>
                                </div>
                                <div class="clearfix"></div>
                                <div class="money">
                                    <h1>共{{item.goodsNumber}}件商品合计：<h1>￥{{item.totalPrice | amountMin100(2)}}</h1></h1>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
                <loadingtmp :busy="busy" :datalength="orderlist.length" :loadall="loadall"></loadingtmp>
            </div>
        </div>
        <div class="evaluation" v-show="evaluationShow">
            <div class="evaluation1">
               <p class="evaluation1P">
                   您已确认收货,可前往评价
               </p>
               <div class="btnnn">
                   <div class="TemporarilyNot" @click="TemporarilyNot">
                       暂不评价
                   </div>
                    <div class="immediately" @click="commentsHref1">
                       立即评价
                   </div>
               </div>
            </div>
        </div>
        <business_footer :pageName="'busiOrder'"></business_footer>
    </div>
</template>
<style scoped>
    @import "../../../assets/business/css/order.css";
    @import "../../../assets/personal/css/personorder.css";
    .evaluation{
        position: fixed;
        top:0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0,0,0.5);
        z-index: 20;
    }
    .evaluation1{
        width: 274px;
        margin: 0 auto;
        background: #ffffff;
        margin-top: 60%;
        border-radius: 10px;
    }
    .evaluation1P{
        line-height: 80px;
    }
    .btn:after{
        display:block;
        clear:both;content:"";
        visibility:hidden;
        clear: both;
    } 
    .btnnn{
        padding-bottom: 35px;
    }
    .btnnn:after{
    display:block;
    clear:both;content:"";
    visibility:hidden;
    clear: both;
} 
    .TemporarilyNot,.immediately{
        float: left;
        width: 25%;
        border: 1px solid red;
        line-height: 36px;
        border-radius: 10px;
    }
    .TemporarilyNot{
        margin-left: 20%;
        margin-right:7%;
        border-color: #666666;
    }
</style>
<script>
    import loadingtmp from '@/components/load/loading'
    import business_footer from "@/components/footer"
    export default {
        components: {
            business_footer,
            loadingtmp
        },
        data() {
            return {
                ordertype: -1,
                orderlist: [],
                company: {},
                panduan: '',
                ordertypeAPI: '',
                page: 1,
                pageSize: 2,
                busy: false,////////////
                loadall: false,
                dingdanstyle_l: 1,
                xianxiaordertype: -1,
                orderlist1: [],
                evaluationShow:false,//以下参数是跳转评论页的
                idgod:'',
                Thum:'',
                Name:'',
                Numbers:"",
                ScreenPrice:'',
                prodId1:''
            }
        },
        methods: {
            TemporarilyNot(){//暂不评价
                this.evaluationShow=false
            },
            immediately(){

            },
            initpage(){
                this.page =1
                this.loadall =false
                this.busy = false
                this.orderlist= []
                this.orderlist1 = []
            },
            hrefgoods:function(goodsId){
                 this.$router.push({ name: "Commodity_details", query:{id:goodsId,subid:0} })
            },
            orderdetailsHref: function (orderId_id) {//跳转
                this.$router.push({ name: "orderdetails", query: { id: orderId_id ,type:1} })
            },
            commentsHref: function (idgod, Thum, Name, Numbers, ScreenPrice,prodId1,companyId) {//跳转评论    
                this.$router.push({ name: "comments", query: { id: idgod, goodsThum: Thum, goodsName: Name, goodsNumber: Numbers, goodsScreenPrice: ScreenPrice ,prodId:prodId1,companyId1:companyId} })
            },
            commentsHref1:function(){//跳转评论  
                 this.$router.push({ name: "comments", query: { id: this.idgod, goodsThum: this.Thum, goodsName: this.Name, goodsNumber: this.Numbers, goodsScreenPrice: this.ScreenPrice ,prodId:this.prodId1,companyId1:this.companyId} })
            },
            href_shops: function (id_shop) {
                this.$router.push({ name: "Commodity", query: { id: id_shop} })
            },
            fukuanher: function (odid, Amount) {
                // this.$router.push({ name: "paymentchoice", query: { id: odid, amount: Amount } })
                window.location = '/wap/pay_gxtscan1.html?orderid='+odid+'&ordertype='+this.dingdanstyle_l;
            },
            fukuanher_payht: function (id, mo) {
                window.location = '/wap/pay_gxtscan1.html?orderid='+id+'&ordertype='+this.dingdanstyle_l;
            },
            confirm: function (companyId,idgod, Thum, Name, Numbers, ScreenPrice,prodId1) {//确认收货
                this.evaluationShow=true
                this.$http.put(this.APIURL_PREFIX + '/api/wap/updateShoppingOrder', $.param({ orderStatus: 2, id: companyId })).then((response) => {
                   layer.msg("确认成功")
                    this.page=1;
                    this.loadMore()
                    this.idgod=idgod
                    this.Thum= Thum
                    this.Name=Name
                    this.Numbers=Numbers
                    this.ScreenPrice=ScreenPrice
                    this.prodId1=prodId1
                    this.companyId=companyId
                }).catch(function (err) {
                });
            },
            dingdanstyle: function (type) {
                this.initpage()
                this.dingdanstyle_l = type
                this.loadMore()
            },
            person_list() {

            },
            bus_pd() {
                this.panduan = this.$route.query.id;
                console.log(this.panduan)
                if (this.panduan == 0) {
                    this.ordertype = this.$route.query.id;
                }
                else if (this.panduan == 1) {
                    this.ordertype = this.$route.query.id;
                } else if (this.panduan == 2) {
                    this.ordertype = this.$route.query.id;
                }
                else if (this.panduan == 3) {
                    this.ordertype = this.$route.query.id;
                }
            },
            cancel: function (iid) {
                this.$http.delete(this.APIURL_PREFIX + '/api/wap/deleteShoppingOrder/' + iid).then((response) => {
                    layer.msg("取消订单成功")
                    this.page=1;
                    this.loadMore()
                }).catch(function (err) {
                })
            },
            xianxia: (function (type) {//线下支付订单
                
                this.xianxiaordertype = type
                this.initpage()
                this.loadMore();
            }),
            bus_order: (function (ordertype) {//线上
                this.ordertype = ordertype;
                this.initpage()
                this.loadMore();
            }),
            bus_order_list(flag) {//分页接口
                var vm = this;
                if (2 == this.dingdanstyle_l) {
                    var params = {}
                    params.page = this.page
                    params.pageSize = this.pageSize
                    if (-1 == this.xianxiaordertype) {

                    } else if (0 == this.xianxiaordertype) {
                        params.payStatus = 0
                    } else if (1 == this.xianxiaordertype) {
                        params.payStatus = 1
                    }
                    //    if(params.payStatus==''||params.payStatus==undefined||params.payStatus==0){
                    //       console.log('hide')
                    //         $('#newp').text('')
                    //   }else{
                    //       console.log('show')
                    //       $('#newp').show()
                    //   }
                    this.$http.get(this.APIURL_PREFIX + "/api/wap/user/localOrders", { params }).then((response) => {
                        if (flag) {
                            this.orderlist1 = this.orderlist1.concat(response.data.data);
                        } else {
                            this.orderlist1 = response.data.data;
                        }
                        if (0 == response.data.data.length || response.data.data.length < this.pageSize) {
                            this.busy = true;
                            this.loadall = true;
                        }
                        else {
                            this.busy = false;
                            this.page++
                        }
                    }).catch(function (err) {
                        console.log(err)
                    });
                    //   var requrl = this.APIURL_PREFIX + '/api/wap/user/localOrders?page=1';
                    // if (-1 != this.xianxiaordertype) { requrl += ("&payStatus=" + this.xianxiaordertype) }
                    // this.$http.get(requrl).then((response) => {
                    //     this.orderlist = response.data.data
                    // }).catch(function (err) {
                    //     console.log(err)
                    // });
                } else {
                    var params = {}
                    var api;
                    params.page = vm.page
                    params.rows = vm.pageSize
                    if (0 == vm.ordertype) {//没付款
                        params.payStatus = 0
                    } else if (1 == vm.ordertype) {//付款
                        params.payStatus = 1
                        params.orderStatus=1
                    } else if (2 == vm.ordertype) {//待评价
                        params.orderStatus = 2
                    } else if (3 == vm.ordertype) {//售后
                        params.orderStatus = 3
                    }
                    if (2 == vm.ordertype) {
                        //this.orderlist = []
                        api = "/api/wap/selectForPj"
                    } else {
                      //  this.orderlist = []
                        api = "/api/wap/selectForOrder"
                    }
                    this.$http.get(this.APIURL_PREFIX + api, { params }).then((response) => {
                        if (flag) {
                            this.orderlist = this.orderlist.concat(response.data.data);
                        } else {
                            this.orderlist = response.data.data;
                        }
                        if (0 == response.data.data.length || response.data.data.length < this.pageSize) {
                            this.busy = true;
                            this.loadall = true;
                        }
                        else {
                            this.busy = false;
                            this.page++
                        }
                    }).catch(function (err) {
                        console.log(err)
                    });
                }

            },
            loadMore() {
                this.busy = true;
                setTimeout(() => {
                    this.bus_order_list(this.page > 1);
                }, 500);
            },
        },
        mounted: function () {
            this.bus_pd()
            this.bus_order(this.ordertype);
        }
    }

</script>

